<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跟进记录</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" th:href="@{favicon.ico}">
    <link href="../../static/css/bootstrap.min.css?v=3.3.6" th:href="@{/static/css/bootstrap.min.css(v=3.3.6)}"
          rel="stylesheet">
    <link href="../../static/css/font-awesome.css?v=4.4.0" th:href="@{/static/css/font-awesome.css(v=4.4.0)}"
          rel="stylesheet">
    <!--summernote文本编辑器-->
    <link href="../../static/css/plugins/summernote/summernote.css"
          th:href="@{/static/css/plugins/summernote/summernote.css}" rel="stylesheet">
    <link href="../../static/css/plugins/summernote/summernote-bs3.css"
          th:href="@{/static/css/plugins/summernote/summernote-bs3.css}" rel="stylesheet">

    <link href="../../static/css/animate.css" th:href="@{/static/css/animate.css}" rel="stylesheet">
    <link href="../../static/css/style.css?v=4.1.0" th:href="@{/static/css/style.css(v=4.1.0)}" rel="stylesheet">

</head>

<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-7">
            <div class="row">
                <div class="col-sm-12">
                    <form class="form-inline">
                        <div class="form-group">
                            <!--富文本框编辑器-->
                            <div id="summerNote"></div>
                        </div>
                        <div style="margin-top: 10px;">
                            <div class="form-group">
                                <label for="customerType">客户类型:</label>
                                <div class="input-group input-s-sm">
                                    <input type="text" class="form-control" id="customerType" style="width: 135px">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-white dropdown-toggle"
                                                data-toggle="dropdown">
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                        </ul>
                                    </div>
                                </div>
                                <label for="interviewTime" style="margin-left: 30px">面试时间:</label>
                                <input type="text" class="form-control" id="interviewTime" >
                            </div>
                            <button type="button" class="btn btn-primary" id="record"
                                    style="float: right;margin-right: 70px">保存
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="row" style="margin-top:10px">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="" id="ibox-content">
                            <div id="vertical-timeline" class="vertical-container light-timeline">
                                <div id="content"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <div class="row">
                                <div class="col-sm-3"><h5>基本信息</h5></div>
                                <div class="col-sm-6 col-sm-offset-3 text-right" id="success_div">
                                    <a href="javascript:void(0);" id="cancel" style="padding-right: 15px">取消</a>
                                    <a href="javascript:void(0);" id="complete">完成</a>
                                </div>
                                <div class="col-sm-2 col-sm-offset-7 text-right" style="display: none" id="edit_div"><a
                                        href="javascript:void(0);" id="edit">编辑</a></div>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <form class="form-horizontal" action="#" id="customerInfo">
                                <input th:value="${key}" type="hidden" name="id" id="clientId"/>
                                <div class="form-group">
                                    <label for="customerName" class="col-sm-2 control-label">客户姓名</label>
                                    <div class="col-sm-4">
                                        <input type="email" class="form-control h" id="customerName"
                                               value="叶建雄" placeholder="请输入客户姓名">
                                    </div>
                                    <label for="specialty" class="col-sm-2 control-label">原本专业</label>
                                    <div class="col-sm-4">
                                        <input type="text" value="软件技术" class="form-control h" id="specialty"
                                               placeholder="请输入原本专业">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="customerGender" class="col-sm-2 control-label">客户性别</label>
                                    <div class="col-sm-4">
                                        <input type="text" value="男" class="form-control h" id="customerGender"
                                               placeholder="性别">
                                    </div>
                                    <label for="purpose" class="col-sm-2 control-label">意向专业</label>
                                    <div class="col-sm-4">
                                        <input type="text" value="java开发" class="form-control h" id="purpose"
                                               placeholder="Email">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="phone" class="col-sm-2 control-label">客户电话</label>
                                    <div class="col-sm-4">
                                        <input type="number" value="18807031363" class="form-control h" id="phone"
                                               placeholder="电话">
                                    </div>
                                    <label for="channel" class="col-sm-2 control-label">渠道类型</label>
                                    <div class="col-sm-4">
                                        <input type="text" value="招聘网站" class="form-control h" id="channel"
                                               placeholder="渠道类型">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="email" class="col-sm-2 control-label">客户邮箱</label>
                                    <div class="col-sm-4">
                                        <input type="email" value="1210736981@qq.com" class="form-control h" id="email"
                                               placeholder="邮箱">
                                    </div>
                                    <label for="customerSource" class="col-sm-2 control-label">客户来源</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control h" id="customerSource"
                                               value="前程无忧">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="customer_Type" class="col-sm-2 control-label">客户类型</label>
                                    <div class="col-sm-4">
                                        <input type="text" value="潜在客户" class="form-control h" id="customer_Type"
                                               placeholder="未编辑">
                                    </div>
                                    <label for="customerBelong" class="col-sm-2 control-label">客户归属</label>
                                    <div class="col-sm-4">
                                        <input type="text" value="潜在客户" class="form-control h" id="customerBelong">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="interviewDate" class="col-sm-2 control-label">面试时间</label>
                                    <div class="col-sm-4">
                                        <input type="text" value="2020-06-16" class="form-control h" id="interviewDate">
                                    </div>
                                    <label for="divideClasses" class="col-sm-2 control-label">是否分班</label>
                                    <div class="col-sm-4">
                                        <input type="text" value="是" class="form-control h" id="divideClasses"
                                               placeholder="是否分班">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="../../static/js/jquery.min.js?v=2.1.4" th:src="@{/static/js/jquery.min.js(v=2.1.4)}"></script>
<script src="../../static/js/bootstrap.min.js?v=3.3.6" th:src="@{/static/js/bootstrap.min.js(v=3.3.6)}"></script>
<!-- SUMMERNOTE文本编辑器 -->
<script src="../../static/js/plugins/summernote/summernote.min.js"
        th:src="@{/static/js/plugins/summernote/summernote.min.js}"></script>
<script src="../../static/js/plugins/summernote/summernote-zh-CN.js"
        th:src="@{/static/js/plugins/summernote/summernote-zh-CN.js}"></script>
<!--suggest-->
<script src="../../static/js/plugins/suggest/bootstrap-suggest.min.js"
        th:src="@{/static/js/plugins/suggest/bootstrap-suggest.min.js}"></script>
<script>
    $(function () {
        $('#summerNote').summernote({
            height: "200px",
            fontsize: '18',
        });
    })
</script>
<script>
    //当页面加载完成后向服务器发起请求 获取当前客户信息
    $(document).ready(function () {
        var id = $("#clientId").val()

        //显示基本信息
        $.ajax({
            url: "/owep/client/findClientById",
            method: "GET",
            async: true,
            data: "id=" + id,
            dataType: "json",
            contentType: false,
            processData: false,
            success: function (data) {
                //给表单赋值
                $("#customerName").val(data.clientName);
                $("#specialty").val(data.major);  //原本专业
                data.gender == "1" ? $("#customerGender").val("男") : $("#customerGender").val("女");
                $("#purpose").val(data.profession);  //意向专业
                $("#phone").val(data.clientPhone);
                $("#channel").val(data.channelTypeName); //渠道类型
                $("#email").val(data.clientEmail);
                $("#customerSource").val(data.channelName);  //客户来源
                if (data.clientState == "0") {
                    //客户类型：0无意向、1已签约、2潜在客户、3标准客户
                    $("#customer_Type").val("无意向");
                } else if (data.clientState == "1") {
                    $("#customer_Type").val("已签约");
                } else if (data.clientState == "2") {
                    $("#customer_Type").val("潜在客户");
                } else if (data.clientState == "3") {
                    $("#customer_Type").val("标准客户");
                } else {
                    $("#customer_Type").val("客户类型异常");
                }
                $("#customerBelong").val(data.userName);  //客户归属
                $("#interviewDate").val(data.interviewTimeStart)
                data.isAssignClass == "0" ? $("#divideClasses").val("未分配") : $("#divideClasses").val("已分配")
                $("#evaluate").val(data.salsemanDescribe);


            }
        });

        //显示跟进记录
        $.ajax({
            url: "/owep/client/findClientNoteById",
            method: "GET",
            async: true,
            data: "id=" + id,
            dataType: "json",
            contentType: false,
            processData: false,
            success: function (data) {
                var temp = '';
                for (var i = 0; i < data.length; i++) {
                    temp = '<div class="vertical-timeline-block">\n' +
                        '                                    <div class="vertical-timeline-icon blue-bg">\n' +
                        '                                        <i class="fa fa-file-text"></i>\n' +
                        '                                    </div>\n\n' +
                        '                                    <div class="vertical-timeline-content">\n' +
                        '                                        <h2>客户类型</h2>\n' +
                        '                                        <p>#{clientState}</p>\n' +
                        '                                        <h2>客户说明</h2>\n' +
                        '                                        #{clientNote} <br>\n' +
                        '                                        <small>#{createTime}</small>\n' +
                        '                                    </span>\n' +
                        '                                    </div>\n' +
                        '                                </div>'
                    //给占位符赋值
                    //客户类型：0无意向、1已签约、2潜在客户、3标准客户
                    if (data[i].clientState == 0) {
                        temp = temp.replace("#{clientState}", "无意向");
                    } else if (data[i].clientState == 1) {
                        temp = temp.replace("#{clientState}", "已签约");
                    } else if (data[i].clientState == 2) {
                        temp = temp.replace("#{clientState}", "潜在客户");
                    } else if (data[i].clientState == 3) {
                        temp = temp.replace("#{clientState}", "标准客户");
                    }
                    temp = temp.replace("#{clientNote}", data[i].clientNote);
                    temp = temp.replace("#{createTime}", data[i].createTime);
                    //追加
                    $("#content").append(temp);
                }
            }
        })
    });

    $(function () {
        // Local script for demo purpose only
        $('#lightVersion').click(function (event) {
            event.preventDefault()
            $('#ibox-content').removeClass('ibox-content');
            $('#vertical-timeline').removeClass('dark-timeline');
            $('#vertical-timeline').addClass('light-timeline');
        });

        $('#darkVersion').click(function (event) {
            event.preventDefault()
            $('#ibox-content').addClass('ibox-content');
            $('#vertical-timeline').removeClass('light-timeline');
            $('#vertical-timeline').addClass('dark-timeline');
        });

        $('#leftVersion').click(function (event) {
            event.preventDefault()
            $('#vertical-timeline').toggleClass('center-orientation');
        });
    });

    $("#customerType").bsSuggest('init', {
        url: '/owep/client/clientState',
        idField: "id",
        keyField: "key"
    });
</script>
<script>
    $("#complete").click(function () {
        //获取表单数据
        var id = $("#clientId").val();
        var clientName = $("#customerName").val();
        var major = $("#specialty").val();  //原本专业
        $("#customerGender").val() == "男" ? gender = 1 : gender = 0;
        var profession = $("#purpose").val();  //意向专业
        var clientPhone = $("#phone").val();
        var channelTypeName = $("#channel").val(); //渠道类型
        var clientEmail = $("#email").val();
        var channelName = $("#customerSource").val();  //客户来源
        //客户类型的判断
        if ($("#customer_Type").val() == "无意向") {
            //客户类型：0无意向、1已签约、2潜在客户、3标准客户
            clientState = 0;
        } else if ($("#customer_Type").val() == "已签约") {
            clientState = 1;
        } else if ($("#customer_Type").val() == "潜在客户") {
            clientState = 2;
        } else if ($("#customer_Type").val() == "标准客户") {
            clientState = 3;
        } else {
            alert("客户类型异常！");
            return;
        }
        var userName = $("#customerBelong").val();
        var interviewTimeStart = $("#interviewDate").val();
        $("#divideClasses").val() == "已分配" ? isAssignClass = 1 : isAssignClass = 0;

        var formData = new FormData();
        formData.append("id", id);
        formData.append("clientName", clientName);
        formData.append("major", major);
        formData.append("gender", gender);
        formData.append("profession.profName", profession);
        formData.append("clientPhone", clientPhone);
        formData.append("channel.channelType.channelTypeName", channelTypeName);
        formData.append("clientEmail", clientEmail);
        formData.append("channel.channelName", channelName);
        formData.append("clientState", clientState);
        formData.append("user.userName", userName);
        formData.append("interviewTimeStart", interviewTimeStart);
        formData.append("isAssignClass", isAssignClass);

        //异步保存数据
        $.ajax({
            url: "/owep/client/updateClient",
            method: "POST",
            async: true,
            data: formData,  //综合表单，使用formData来封装，不能用Serializable，否则无法提交
            dataType: "json",
            contentType: false,
            processData: false,
            success: function (data) {
                alert(data.msg);
                window.location.reload();
            }

        })
        //将  取消和 完成隐藏
        $(".col-sm-6.col-sm-offset-3.text-right").css("display", "none");
        //将编辑按钮显示
        $(".col-sm-2.col-sm-offset-7.text-right").css("display", "inline");

        $(".h").css("border", "none").attr("readOnly", "false");
        $("#evaluate").css("border", "none").attr("readOnly", "false");


    });
    $("#cancel").click(function () {
        //将  取消和 完成隐藏
        $(".col-sm-6.col-sm-offset-3.text-right").css("display", "none");
        //将编辑按钮显示
        $(".col-sm-2.col-sm-offset-7.text-right").css("display", "inline");

        $(".h").css("border", "none").attr("readOnly", "false");
        $("#evaluate").css("border", "none").attr("readOnly", "false");
    })
    $("#edit").click(function () {
        $(".h").css("border", "1px solid #e5e6e7").removeAttr("readOnly");
        $("#evaluate").css("border", "1px solid #e5e6e7").removeAttr("readOnly");
        //将编辑按钮隐藏
        $(".col-sm-6.col-sm-offset-3.text-right").css("display", "inline");
        //将取消和 完成显示
        $(".col-sm-2.col-sm-offset-7.text-right").css("display", "none");

    })
    //保存按钮 增加跟进记录
    $("#record").click(function () {
        //获取表单数据
        var id = $("#clientId").val();
        var clientNote = $("#summerNote").code();
        console.log($("#summerNote"));
        console.log(clientNote);
        //客户类型的判断
        if ($("#customerType").val() == "无意向") {
            //客户类型：0无意向、1已签约、2潜在客户、3标准客户
            clientState = 0;
        } else if ($("#customerType").val() == "已签约") {
            clientState = 1;
        } else if ($("#customerType").val() == "潜在客户") {
            clientState = 2;
        } else if ($("#customerType").val() == "标准客户") {
            clientState = 3;
        } else {
            alert("客户类型异常！");
            return;
        }
        var formData = new FormData();
        formData.append("id", id);
        formData.append("clientNote", clientNote);
        formData.append("clientState", clientState);
        //异步保存数据
        $.ajax({
            url: "/owep/client/upDateRecord",
            method: "POST",
            async: true,
            data: formData,  //综合表单，使用formData来封装，不能用Serializable，否则无法提交
            dataType: "json",
            contentType: false,
            processData: false,
            success: function (data) {
                alert(data.msg);
                window.location.reload();
            }

        })
    })
</script>
</body>

</html>